Bashbash
먼저 Prisma를 설치하고 실행한다. 이후 생성된 .env파일과 prisma/schema.prisma 파일의 내용을 수정해주면 연결이 완료 된다.
.env와 schema.prisma 파일 수정#
supabase의 dashboard > 상단의 connect > ORMs를 클릭하면 Prisma에 필요한 설정을 확인할 수 있으며 매우 간편하게 .env와 schema.prisma 파일의 설정을 그냥 복사 붙혀넣기하면 된다.
Prisma와 Strapi간의 호환성 문제#
호기롭게 bunx prisma db pull을 입력하니 에러들이 발생 제대로 호환되지 않는것으로 보인다.
보니까 이름들만 수정하면 임시적으로 해결이 될것같아 claude code를 통해 파일을 수정하였고 에러는 사라졌다. 하지만 이제 발생될 문제들에 대한 고민들이 생긴다.
Migration 문제에 대한 생각#
이름이 충돌이 난다는 이야기는 일시적으로 수정을 하더라도 prisma를 통해 schema를 정의하여 Migration할때 충돌이 날 수 있다는 것이다. 충돌이 나면 테이블이 새로써지는 경우가 있을 수 있기 때문에 db가 사라질수도 있다.
해결방안#
Strapi와 Prisma의 역활을 완전히 분리하여 충돌이 없도록 하는것이 좋을것이라고 생각된다. Strapi는 웹사이트에 필요한 자원들만을 관리하는 역할을 하기 때문에 Strai에서 저장된 내용들은 Prisma를 통해 수정될 경우가 없다.
sql view 사용하기#
Claude는 SQL의 View를 활용하여 Strapi로 관리되는 테이블중 필요한 객체만 조회할 수 있도록 설정하는것을 추천했다.
이때 Supabase-mcp가 아주 큰 도움이 되었다. 실제로 mcp를 통해 설정된 테이블들의 형태와 관계를 파악하고 내가 원하는 형태의 데이터로 가공해서 가져올 수 있도록 하였다.
SQL 문을통해 View 생성하기
-
에셋을 가져오기 위한 SQL 문
SQLsql -
컨버팅된 이야기를 가져오기 위한 SQL 문
SQLsql
Prisma에 View 적용하기
Prismaprisma
먼저 view를 사용하기 위해 client 설정 부분에 previewFeatures를 통해 views를 추가해야 한다.
그리고 schema.prisma 파일에 supabase-mcp를 통해 view의 내용에 맞게 prisma에서 읽어올 수 있는 view를 정의했다.
Prismaprisma
view를 사용하기 위해서는 view 라는 이름으로 객체를 정의해 주어야 하고 supabase에서 생성했던 view의 이름에 맞춰 @@map("뷰 이름")을 작성해 주어야 한다.
Prisma multischema 사용하기#
Strapi와 nextjs에서 사용될 DB를 서로 분리하는것이 안전하고 Prisma를 사용하기 위해서도 분리가 필요하였다. ai의 생성 프로세스와 strapi를 통한 구축은 이미 완료가 되어 있는 상황이라 supabase가 실제로 사용되고 있는 중이었고 이때문에 prisma migrate dev명령어를 통해 모델을 변경하고자 할때 충돌이나 에러가 생겼다.
따라서 기본적으로 strapi가 사용하고 있는 public 스키마 이외에 app이라는 스키마를 만들고 해당 스키마 내부에서 웹앱을 위한 데이터를 정의하고 개발해 나가기로 하였다.
Supabase에서 Dashboard > schema 를 클릭하면 리스트 아래 새로운 스키마를 생성할 수 있는 버튼이 있다. 해당 버튼을 클릭하고 Nextjs에서 관리할 app이라는 새로운 스키마를 만들어 준다.
Prismaprisma
multischema를 사용하기 위해선 client설정의 previewFeatures에 multischema를 추가해주고 db설정에 schemas와 사용할 스키마를 추가해 준다. 나의 경우 nextjs에서 사용할 app과 strapi가 사용하는 public스키마 두개를 설정해 주었다.
Prismaprisma
이제부터 모델과 뷰를 추가할때 하단에 해당 모델/뷰 가 존재하는 schema를 @@schema(스키마 이름)의 형태로 추가해 주어야 한다.
지금까지의 세팅이 완료 되면 사용할수는 있다. 다만 개발의 편의성이 많이 떨어진다.
먼저 웹앱을 위한 모델을 정의하고 개발해 나가기 위해서 bunx prisma migrate dev를 사용하면 public 스키마와 app스키마 둘 다 migrate을 시도하게 되는데 public에는 이미 데이터가 존재하여 충돌 에러가 나타난다. 그리고 이것을 해결하겠다고 reset을 하면? 데이터가 날아가게 된다.
public에 있는 데이터는 무조건 적으로 strapi와 n8n을 통해 관리가 되기 때문에 migrate이 필요가 없다.
이 문제를 해결하기 위해서는 migrate을 진행할때는 Strapi에 해당하는 뷰들을 지우고 multischema의 스키마부분에서도 public을 삭제하고 진행하고 타입을 위해 generate을 할때에만 다시 추가하여 bunx prisma generate을 진행해주어야 한다.
Prisma 개발환경을 위한 스크립트 만들기#
Claude의 도움을 받아 migrate dev를 할때는 불필요한 부분을 삭제하는 스크립트를 만들어서 package.json에 실행어로 등록해 주었다.
Javascriptjavascript
타입 생성이 제대로 동작하지 않는 문제 해결하기#
지금까지의 세팅에서 사용하는 view와 multischema는 previewFeatures로서 아직 안정적이지 않은것으로 보인다.
이때문에 해당 기능을 사용하지 않을때 bunx prisma generate를 통해 새로운 타입을 생성하면 바로바로 적용이 되어 prisma client에서 lsp를 통해 접근이 가능하지만.
previewFeatures을 사용할때에는 제대로 적용이 되지 않았다.
해당 문제를 해결하기 위해선 node_modules/@prisma/client폴더를 삭제해 캐시를 삭제하고 다시 생성해주어야 한다.
이 부분도 개발의 편의성을 위해 Claude를 통해 스크립트를 만들었다.
Javascriptjavascript
Prisma를 통해 뷰 접근하여 테스트하기#
에셋들을 불러와 테스트하기 위해 페이지를 만들었다.
React TSXtsx
해당 함수를 통해 SQL View 를 잘 불러올 수 있었는지 확인해 보았고 결과적으로 아주 잘 동작 하였다.
이제 프로젝트를 위한 기본적인 DB와의 연결은 완료 되었다.